<!--金牌顾问详情 -->
<template>
  <div style="position: relative; padding-bottom: 200px" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <div v-show="!loading">
      <heads></heads>
      <tools></tools>
      <div class="minpian">
        <img class="minpian_img" :src="agentInfo && agentInfo.image
          ? agentInfo.image
          : 'https://pic.bangbangtongcheng.com/static/my/header.png'
          " />
        <div class="minpian_center">
          <div class="minpian_center_one">
            <div style="display: flex; align-items: center">
              <div style="font-size: 32px; font-weight: 600">
                <!-- {{
                (agentInfo.userInfo && agentInfo.userInfo.nikeName) ||
                "未命名用户"
              }} -->

                {{ (agentInfo && agentInfo.nikeName) || "未命名用户" }}
              </div>
              <user-label :userInfo="agentInfo || {}" al="flex-start" style="margin-left:12px;">
              </user-label>

              <!-- <div class="jjr" v-if="agentInfo && agentInfo.isAgent == '1'">
                经纪人
              </div>
              <div class="jjr" v-else>个人用户</div> -->
            </div>
            <div v-if="!disa" style="
              display: flex;
              justify-content: space-between;
              cursor: pointer;
            ">
              <div style="
                display: flex;
                flex-direction: column;
                text-align: center;
                justify-items: center;
                align-items: center;
              " @click="collect2(agentInfo)" v-if="agentInfo.whetherCollection == '1'">
                <img style="width: 30px; height: 30px" src="../../assets/shou3.png" />
                <span style="font-size: 14px; color: #333">已关注</span>
              </div>
              <div style="
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
              " @click="collect2(agentInfo)" v-else>
                <img style="width: 30px; height: 30px" src="../../assets/shou2.png" />
                <span style="font-size: 14px; color: #333">关注</span>
              </div>
            </div>
          </div>
          <div class="minpian_center_one">
            <div style="
              font-size: 22px;
              font-weight: 400;
              display: flex;
              color: #aaaaaa;
            " v-if="agentInfo && agentInfo.isAgent == 1">
              <span>为TA评分：</span>
              <el-rate v-model="agentInfo.score" :disabled="disa" @change="rateChage"></el-rate>
            </div>
            <div @click="companyDeilta(agentInfo)" v-if="agentInfo && agentInfo.isAgent == '1'">
              <span>TA的公司</span>
              <img style="width: 15px; height: 15px" src="../../assets/bbcz/tpxqy01.png" alt="" />
            </div>
          </div>
          <div class="minpian_center_one">
            <div style="display:flex;align-items: center;height:100%">
              <div class="vip-level pointer" v-if="agentInfo && agentInfo != ''" :style="{
                backgroundColor: colors[agentInfo.memberLevel - 1].bgColor,
                color: colors[agentInfo.memberLevel - 1].wordColor,
                borderColor: colors[agentInfo.memberLevel - 1].lineColor
              }">
                {{ agentInfo.memberLevelTitle }}
              </div>
            </div>
            <div class="wei" @click="weiguiClick(agentInfo)">
              <span>违规次数</span>
              <img style="width: 15px; height: 15px" src="../../assets/bbcz/tpxqy01.png" alt="" />
              <span style="color: red; font-weight: 600; font-size: 20px">{{
                agentInfo.violationsNumber || 0
              }}</span>
            </div>
          </div>
          <div class="contactWay" v-if="!disa">
            <div style="display: flex;">
              <div @click="chat(agentInfo)"
                style="cursor: pointer;display: flex;width: 130px;height: 50px;background-color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;">
                <img style="width: 33px;height: 33px;" src="../../assets/weixin_b.png" />
                <span style="color: #FFFFFF;">在线聊天</span>
              </div>
              <div
                style="cursor: pointer;margin-left: 20px;display: flex;height: 50px;padding: 0 15px;background-color: #64b6a824;color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;"
                @click="phoneCheck">
                <img style="width: 33px;height: 33px;" src="../../assets/dianhua_lan.png" />
                <span>{{ phonestate ? agentInfo.phone : "拨打电话" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 1200px; margin: auto">
        <div class="bottom">
          <div class="titLiat">
            <div @click="titClick(1)" v-if="agentInfo.type == 2 ||
              agentInfo.type == 3 ||
              agentInfo.type == 4
              " :class="xuanzhong == 1 ? 'li cur' : 'li'">
              <p>全部</p>
              <img v-if="xuanzhong == 1" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(2)" v-if="agentInfo.type == 3 || agentInfo.type == 4"
              :class="xuanzhong == 2 ? 'li cur' : 'li'">
              <p>到店新车</p>
              <img v-if="xuanzhong == 2" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(3)" v-if="agentInfo.type == 1 ||
              agentInfo.type == 3 ||
              agentInfo.type == 4
              " :class="xuanzhong == 3 ? 'li cur' : 'li'">
              <p>二手车</p>
              <img v-if="xuanzhong == 3" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(4)" v-if="agentInfo.type == 3" :class="xuanzhong == 4 ? 'li cur' : 'li'">
              <p>车系</p>
              <img v-if="xuanzhong == 4" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(5)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
              :class="xuanzhong == 5 ? 'li cur' : 'li'">
              <p>新房</p>
              <img v-if="xuanzhong == 5" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(6)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
              :class="xuanzhong == 6 ? 'li cur' : 'li'">
              <p>二手房</p>
              <img v-if="xuanzhong == 6" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(7)" v-if="agentInfo.type == 1 || agentInfo.type == 2"
              :class="xuanzhong == 7 ? 'li cur' : 'li'">
              <p>出租房</p>
              <img v-if="xuanzhong == 7" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(8)" v-if="agentInfo.type == 5" :class="xuanzhong == 8 ? 'li cur' : 'li'">
              <p>服务项目</p>
              <img v-if="xuanzhong == 8" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(10)" v-if="(agentInfo.businessType != 0 && agentInfo.isShop == 1) ||
              agentInfo.businessType == 0
              " :class="xuanzhong == 10 ? 'li cur' : 'li'">
              <p>招聘</p>
              <img v-if="xuanzhong == 10" src="../../assets/xuanzhong.png" />
            </div>
            <div @click="titClick(9)" :class="xuanzhong == 9 ? 'li cur' : 'li'">
              <p>帮友圈</p>
              <img v-if="xuanzhong == 9" src="../../assets/xuanzhong.png" />
            </div>
          </div>
        </div>
        <div class="list" v-if="(xuanzhong == 1 && agentInfo.type == 3) ||
          (xuanzhong == 1 && agentInfo.type == 4) ||
          xuanzhong == 2 ||
          xuanzhong == 3 ||
          xuanzhong == 4
          ">
          <div class="li" v-for="(item, index) in houseList" :key="index">
            <img class="biao" @click="details(item, '1')" :src="item.vehicleCoverPicture
              ? item.vehicleCoverPicture
              : $img + item.houseImageDiv
              " style="
              object-fit: contain;
              cursor: pointer;
              background-color: #00000033;
            " />
            <div class="name">
              <div class="t_1" @click="details(item, '1')">
                <tag-view :item="item"></tag-view>{{
                  item.vehicleBrandModel
                  ? (item.vehicleBrandModel.split("|")[0] || "") +
                  " " +
                  (item.vehicleBrandModel.split("|")[1] || "")
                  : ""
                }}
                {{ item.model ? item.model + "/" : "" }}
                {{
                  item.bodyStructureDoors +
                  "门" +
                  item.bodyStructureSeat +
                  "座" +
                  item.bodyStructureVehicle +
                  "车"
                }}
              </div>
              <div class="t_4">
                <img style="border-radius: 31px" :src="item.userInformation
                      ? item.userInformation.image ||
                      'https://pic.bangbangtongcheng.com/static/my/header.png'
                      : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " />
                <span style="cursor: pointer">{{
                  item.userInformation
                  ? item.userInformation.nikeName || "未命名用户"
                  : "未命名用户"
                }}</span>
                <div @click.stop="shopdetails(item, '1')" style="cursor: pointer;padding:0 6px;">
                  {{
                    item.distributor ? item.distributor.storeName : "个人车源"
                  }}
                </div>
              </div>
            </div>
            <div class="qian" v-if="item.vehicleType == 3">
              <p class="p1">{{ item.intervalPrice }}万</p>
            </div>
            <div class="qian" v-else>
              <p class="p1">{{ item.price }}万</p>
            </div>
          </div>
          <div v-if="houseList.length == 0">
            <el-empty description="没有更多数据"></el-empty>
          </div>
        </div>
        <div class="list" v-if="(xuanzhong == 1 && agentInfo.type == 2) ||
          xuanzhong == 5 ||
          xuanzhong == 6 ||
          xuanzhong == 7
          ">
          <div class="lify" v-for="(item, index) in houseList" :key="index">
            <img class="biao" @click="details(item, '2')" :src="item.displayDiagram ||
              item.display_diagram ||
              (item.houseImage && item.houseImage.split('|')[0]) ||
              (item.house_image && item.house_image.split('|')[0])
              " />
            <div class="name">
              <div class="t_1" @click="details(item, '2')">
                <tag-view :item="item"></tag-view>{{ item.title }}
              </div>
              <div class="t_2">
                <span style="margin-right: 5px">{{ item.region }}</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="t_3">
                <span style="margin-right: 16px">{{ item.house_type }}</span>
                <span style="margin-right: 16px">{{ item.AREA }}m²</span>
                <span>{{ item.foors }}</span>
              </div>
              <div class="t_4">
                <img style="border-radius: 31px;" :src="item.image
                  ? item.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " />
                <span>{{ item.nikeName || "未命名用户" }}</span>
                <div style="cursor: pointer;" @click="shopdetails(item, '2')">
                  {{ item.shop_name || "个人房源" }}
                </div>
              </div>
            </div>
            <div class="qian" v-if="item.transaction_type == 2">
              <p class="p1">{{ item.price }}万</p>
              <p class="p2">
                {{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/m²
              </p>
            </div>
            <div class="qian" v-else>
              <p class="p1">{{ item.price }}元/月</p>
            </div>
          </div>
          <div v-if="houseList.length == 0">
            <el-empty description="没有更多数据"></el-empty>
          </div>
        </div>
        <div class="list" v-else-if="xuanzhong == 8">
          <div class="lifw" v-for="(item, index) in houseList" :key="index">
            <img class="biao" @click="detail(item, '3')" style="
                object-fit: contain;
                cursor: pointer;
                background-color: #00000033;
              " :src="item.coverPhoto ? item.coverPhoto : $img + item.houseImageDiv
                " />
            <div class="fwxm">
              <div class="t_1" style="cursor: pointer" @click="detail(item, '3')">
                {{ item.entryName }}
              </div>
              <div class="t_2 " style="cursor: pointer" @click="detail(item, '3')">
                <span style="margin-right: 5px" class="line7">{{
                  item.entryDescription
                }}</span>
              </div>
            </div>
          </div>
          <div v-if="houseList.length == 0">
            <el-empty description="没有更多数据"></el-empty>
          </div>
        </div>
        <div class="fenye" v-if="xuanzhong < 9">
          <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <div v-if="xuanzhong == 9">
        <!-- 帮友圈 -->
        <template v-for="s in ceshiArr">
          <friend-item :item="s" types="3" :wrapWidth="1200" @reData="getMoreData" :key="s.id"></friend-item>
        </template>
        <div v-if="ceshiArr.length == 0">
          <el-empty description="还没有发布帮友圈"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <div v-if="xuanzhong == 10" style="margin:auto;width:1200px;">
        <!-- 招聘 -->
        <template v-for="s in houseList">
          <invite-item :item="s" :pt="0" :key="s.id" line></invite-item>
        </template>
        <div v-if="houseList.length == 0">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <p class="mzsm"
        style="margin-top:-40px;margin-bottom:30px;width:1200px;margin-left: 50%;transform: translateX(-50%);">
        {{ disclaimerContent }}
      </p>
      <report ref="report" :bUserId="agentInfo.id"></report>
      <chat ref="chats"></chat>
      <floor></floor>
      <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
    </div>
  </div>
</template>

<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import report from "../../components/report.vue";
import chat from "../../components/chat.vue";
import tools from "../../components/tools.vue";
import inform from "./inform";
import friendItem from "../index/comp/bbcz-friend-circle-item.vue";
import inviteItem from "@/views/invite/comp/item"; //邀请item

export default {
  components: {
    floor,
    heads,
    report,
    chat,
    tools,
    inform,
    friendItem,
    inviteItem
  },
  data() {
    return {
      collectTotal: "",
      businessType: "",
      isPhoneShow: false,
      bUserId: "",
      agentInfo: "",
      disa: false,
      phonestate: false,
      // list: [
      //   { num: 0, name: "全部" },
      //   { num: 1, name: "新车" },
      //   { num: 2, name: "二手车" },
      //   { num: 3, name: "帮友圈" }
      // ],
      xuanzhong: 1,
      housePage: {
        pageSize: 10,
        pageNo: 1
        // userId:'',
      },
      houseList: [],
      housetotal: 0,
      loginstate: false,
      user: {},
      isCollection: 0,
      userInfo: {},
      ceshiArr: [],
      userId: "",
      loading: true,
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员"
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员"
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员"
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员"
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员"
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员"
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员"
        }
      ]
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getUser();

    this.init(this.id);

    this.getDisclaimers(6);
  },
  methods: {
    showPhone() {
      // agentInfo.userInfo.phone
      this.insertCallRecord({
        userId: this.agentInfo.id,
        phone: this.agentInfo.phone,
        businessType: this.agentInfo.businessType,
        callType: 1
      });
    },
    // 去帮友圈详情
    goFriendDetails(item) {
      console.log("itemitemitemitem", item);
      this.openUrl({
        path: "/my/friendsCircleDetails",
        query: {
          id: item.id
        }
      });
    },
    phoneGet() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      console.log("111");
      this.isPhoneShow = !this.isPhoneShow;
    },
    init(id) {
      // 在售车系/金牌顾问/帮友圈/现车销售
      // 全部/新车/二手车/帮友圈
      this.getUserInfoByUserId(id);

      if (this.loginstate) {
        this.increaseBrowsingRecord();
      }

      // this.getHouseInfo()
    },
    increaseBrowsingRecord() {
      this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
        browseRecordId: this.id,
        viewersId: this.user.id,
        businessType: 2,
        browsingRecords: 1
      }).then(res => { });
    },
    getUserInfoByUserId(id) {
      this.$getHttp("/api/mobile/public/getPersonalHome", {
        otherId: id,
        ownerId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : ""
      }).then(res => {
        if (res.code == 200) {
          let obj = res.personalHomeData;
          // 判断身份状态
          if (obj.businessType == "0" || obj.businessType == "") {
            // 用户为普通人
            obj.type = 1;
          } else if (obj.businessType == 1) {
            if (obj.shopType == 1) {
              // 用户为房源商家、经纪人
              obj.type = 2;
            } else if (obj.shopType == 2) {
              // 用户为楼盘中介
              obj.type = 6;
            }
          } else if (obj.businessType == 2) {
            if (obj.shopType == 1 || obj.shopType == 2) {
              if (obj.isShop == 1) {
                // 用户为车源商家
                obj.type = 3;
              } else {
                // 用户为车源经纪人
                obj.type = 4;
              }
            } else if (obj.shopType == 3 || obj.shopType == 4) {
              // 用户为车源服务商
              obj.type = 5;
            } else {
              // 有时错误数据，返回’‘
              // 用户为车源经纪人
              obj.type = 4;
            }
          }
          this.agentInfo = obj;
          if (localStorage.getItem("userInfo")) {
            this.disa =
              obj.id == JSON.parse(localStorage.getItem("userInfo")).id;
          }
          this.loading = false;
          if (this.$route.query.tabNum) {
            this.xuanzhong = this.$route.query.tabNum;
          } else if (obj.type == 1) {
            // 普通人 - 二手车
            this.xuanzhong = 3;
          } else if (obj.type == 5) {
            // 查服务
            this.xuanzhong = 8;
          } else if (obj.type == 6) {
            // 查招聘 楼盘
            this.xuanzhong = 10;
          }
          this.getMoreData();
        }
      });
    },
    // 关注
    // 关注
    collect2(item, flag) {
      console.log(item);
      if (this.loginstate) {
        if (item.businessType == 2) {
          this.$postHttp(
            "/api/mobile/vehicleOwner/collectionOrCancelCollection",
            {
              collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
              collectionType: "1",
              relationId: item.id,
              ids:
                this.agentInfo.collectionAttention &&
                  this.agentInfo.collectionAttention.id
                  ? this.agentInfo.collectionAttention.id
                  : ""
            }
          ).then(data => {
            if (data.code == 200) {
              this.getUserInfoByUserId(this.id, this.userId);
              this.$message({
                message: data.msg,
                type: "success",
                offset: 120,
                duration: 2000
              });
              if (this.agentInfo.whetherCollection == "0") {
                this.addIntegral(5, "关注用户");
              }
            }
          });
        } else {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: "1",
            cbType: "3",
            relationId: item.id,
            cancel: item.collectionBrowsing ? "1" : ""
          }).then(data => {
            if (data.code == 200) {
              this.getUserInfoByUserId(this.id, this.userId);
              this.$message({
                message: data.msg,
                type: "success",
                offset: 120,
                duration: 2000
              });
              if (this.agentInfo.whetherCollection == "0") {
                this.addIntegral(5, "关注用户");
              }
            }
          });
        }
      } else {
        this.$message({
          message: "请登录之后在收藏！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    getMoreData() {
      this.houseList = [];
      if (this.xuanzhong == 1) {
        // 全部
        if (this.agentInfo.type == 2) {
          // 用户为房源商家、经纪人
          this.getfyPers(this.id, "", "");
        } else if (this.agentInfo.type == 3) {
          // 车源商家
          this.getPers(this.id, "");
        } else if (this.agentInfo.type == 4) {
          // 车源经纪人
          this.getPers(this.id, "1,2");
        }
      } else if (this.xuanzhong == 2) {
        // 到店新车
        this.getPers(this.id, "1");
      } else if (this.xuanzhong == 3) {
        // 二手车
        this.getPers(this.id, "2");
      } else if (this.xuanzhong == 4) {
        // 车系
        this.getPers(this.id, "3");
      } else if (this.xuanzhong == 5) {
        // 新房
        // this.transactionType = "2";
        // this.newOld = "1";
        this.getfyPers(this.id, "2", "1");
      } else if (this.xuanzhong == 6) {
        // 二手
        this.getfyPers(this.id, "2", "2");
      } else if (this.xuanzhong == 7) {
        // 出租
        this.getfyPers(this.id, "1", "");
      } else if (this.xuanzhong == 8) {
        // 服务项目
        this.getfwPers(this.id);
      } else if (this.xuanzhong == 9) {
        // 帮友圈
        this.getByq();
      } else if (this.xuanzhong == 10) {
        // 招聘
        this.getRecruit();
      }
    },
    // 获取招聘
    getRecruit() {
      let that = this;
      this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
        ...this.housePage,
        userId: this.id
      }).then(res => {
        this.houseList = res.recruitment.pageList;
        this.housetotal = res.recruitment.pageCount;
      });
    },
    getPers(userId, vehicleType) {
      this.$getHttp("/api/mobile/vehicleOwner/getVehicleInformation", {
        ...this.housePage,
        userId,
        vehicleType
      }).then(res => {
        if (res.code == 200) {
          this.houseList = res.vehicleInformation.pageList;
          this.housetotal = res.vehicleInformation.pageCount;
        }
      });
    },
    getfyPers(userId, transactionType, newOld) {
      this.$getHttp("/mob/home/getHouseInfo", {
        ...this.housePage,
        userId,
        transactionType,
        newOld,
        isLz: "0",
        examineStatus: "2",
        upStatus: "1"
      }).then(res => {
        if (res.code == 200) {
          res.list.forEach(e => {
            //判断该对象是否存在该属性
            // if('FLOOR' in e){
            // 	e.foors = this.floor(e.FLOOR)
            // }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.houseList = res.list;
          this.housetotal = res.count;
        }
      });
    },
    getfwPers(userId) {
      this.$getHttp("/api/mobile/vehicleOwner/getPersonalHomeOwnerServices", {
        ...this.housePage,
        userId
      }).then(res => {
        if (res.code == 200) {
          this.houseList = res.ownerServiceList.pageList;
          this.housetotal = res.ownerServiceList.pageCount;
        }
      });
    },
    getByq() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getHelpingFriendsCircleByPublisher",
        { ...this.housePage, publisherId: this.id }
      ).then(res => {
        if (res.code == 200) {
          res.helpingFriendsCircleList.pageList.forEach(item => {
            item.chage = 0;
            item.picture = this.manageImg(item.picture);
            item.imageList = this.manageImg(item.picture);
            item.video = this.manageImg(item.video);
          });
          this.ceshiArr = res.helpingFriendsCircleList.pageList;
          this.housetotal = res.helpingFriendsCircleList.pageCount;
          console.log("ceshiArrceshiArrceshiArr", this.ceshiArr);
        }
      });
    },
    getHouseInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.housePage).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            //判断该对象是否存在该属性
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
          });
          this.houseList = data.list;
          this.housetotal = data.count;
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));

      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.userId = user.id;
        this.housePage.userId = user.id;
        // this.$getHttp("/mob/user/getIsCollection",{userId:user.id,cbType:3,type:1,relationId:this.$route.query.id}).then((data) =>{
        // 	if(data.code == 200){
        // 		this.isCollection = data.isCollection
        // 	}
        // })
        // this.$postHttp('/mob/user/saveUserCollection',{
        // 	userId:user.id,
        // 	type:2,
        // 	cbType:3,
        // 	relationId:this.$route.query.id,
        // }).then((data)=>{

        // })
      } else {
        this.housePage.userId = "";
        this.loginstate = false;
      }
    },
    rateChage(e) {
      if (this.loginstate) {
        // this.disa = true;
        this.$postHttp("/mob/user/saveScoreInfo", {
          agentId: this.agentInfo.id,
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          score: e,
          businessType: 2
        }).then(data => {
          if (data.code == 200) {
            this.$message({
              message: "评分成功！",
              type: "success",
              offset: 120,
              duration: 2000
            });

            this.getUserInfoByUserId(this.id, this.userId);
          }
        });
      } else {
        this.$message({
          message: "请登录之后在进行评分",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },

    jubaoClick() {
      this.$refs.report.jubaoGuan();
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    details(item, index) {
      if (index == 1) {
        this.openUrl({
          path: "/index/newSourceDetails",
          query: {
            id: item.id
          }
        });
      } else if (index == 2) {
        if (item.transaction_type == 1) {
          this.openUrl({
            path: "/index/leaseDetails",
            query: {
              id: item.id
            }
          });
        } else {
          this.openUrl({
            path: "/index/newHouseDetails",
            query: {
              id: item.id
            }
          });
        }
      } else if (index == 3) {
        this.openUrl({
          path: "/index/serviceDetails",
          query: {
            id: item.id
          }
        });
      }
    },
    // 违规次数
    weiguiClick(item) {
      // this.disa = true;
      this.bUserId = item.id;
      this.businessType = "";
      // item.businessType;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    // 他的公司
    companyDeilta(item) {
      if (item.businessType == 1) {
        if (item.shopType == 1) {
          const routeLink = this.$router.resolve({
            path: "/index/ShopDetails?id=" + item.shopId
          });
          window.open(routeLink.href, "_self");
        } else if (item.shopType == 2) {
          this.userfy({ id: item.id })
        }

      } else if (item.businessType == 2) {
        if (item.shopType == 1 || item.shopType == 2) {
          const routeLink = this.$router.resolve({
            path: "/index/newDealerDetails?id=" + item.shopId
          });
          window.open(routeLink.href, "_self");
        } else {
          const routeLink = this.$router.resolve({
            path: "/index/ownerServiceDetails?id=" + item.shopId
          });
          window.open(routeLink.href, "_self");
        }
      } else {
        this.myErrorMessage("当前为个人用户!");
      }
    },
    shopdetails(item, index) {
      if (index == 1) {
        if (!item.distributor) {
          this.$message({
            message: "个人车源！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        this.openUrl({
          path: "/index/newDealerDetails",
          query: {
            id: item.distributor.id
          }
        });
      } else {
        if (!item.shop_name) {
          this.$message({
            message: "个人房源！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shop_id
        });
        window.open(routeLink.href, "_blank");
      }
    },
    //开启聊天
    chat(item) {
      if (this.loginstate) {
        this.$refs.chats.chatOpne(item.id);
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    phoneCheck() {
      if (this.loginstate) {
        if (!this.phonestate) {
          this.showPhone();
        }
        this.phonestate = true;
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    currenthouse(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.housePage.pageNo = e;
      this.getMoreData();
    },
    titClick(index) {
      this.housePage.pageNo = 1;
      this.xuanzhong = index;
      this.getMoreData();
    },
    // 获取帮友圈数据
    friendsCircle() {
      let arr = [{ id: 1 }, { id: 2 }];
      arr.forEach(v => {
        v.chage = 0;
      });
      this.ceshiArr = arr;
    },
    zhankaiClick(item) {
      this.ceshiArr.forEach(v => {
        if (v.id == item.id) {
          if (v.chage == 0) {
            v.chage = 1;
          } else {
            v.chage = 0;
          }
        }
      });
    },
    //处理图片
    manageImg(imgs) {
      if (!imgs) return [];
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "3",
            relationId: item.id,
            ids:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : ""
          }
        ).then(data => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    goLike(item, flag) {
      if (this.loginstate) {
        // 去点赞
        var obj = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          circleId: item.id
        };
        item.likeRecord && item.likeRecord.id
          ? (obj.id = item.likeRecord.id)
          : "";
        this.$postHttp("/api/mobile/vehicleOwner/upperOrCancelThumb", {
          // id: item.id,
          ...obj
        }).then(data => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在点赞！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.minpian {
  display: flex;
  width: 1200px;
  margin: auto;
  padding: 20px 0;

  .minpian_img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: contain;
    cursor: pointer;
    background-color: #00000033;
    margin-right: 24px;
  }

  .minpian_center {
    padding-left: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .minpian_center_one {
      cursor: pointer;
      display: flex;
      color: #333;
      justify-content: space-between;
      align-items: center;

      .jjr {
        width: 58px;
        height: 22px;
        border-radius: 14px;
        border: 1px solid #64b6a8;
        font-size: 12px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 22px;
        margin-left: 15px;
      }

      .wei {
        display: flex;
        align-items: center;
      }
    }

    .contactWay {
      display: flex;
      align-items: center;

      .lxfs-item {
        position: relative;
        color: #333333;

        .lxfs-item-phone {
          position: absolute;
          bottom: o;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      img {
        width: 33px;
        height: 33px;
      }
    }
  }
}

.helpFriends {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;

  .helpFriends_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .helpFriends_title_left {
      display: flex;
      align-items: center;

      .helpFriends_title_left_img {
        border-radius: 50%;
        width: 112px;
        height: 112px;
      }

      .helpFriends_title_left_span {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
        margin-left: 40px;
      }
    }

    .helpFriends_title_right {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }

  .helpFriends_article {
    margin-top: 34px;

    .helpFriends_article_text {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
    }

    .helpFriends_article_active {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .unfold {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26px;
      font-weight: 400;
      color: #64b6a8;

      span {
        cursor: pointer;
      }

      .unfold_img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .unfold_yc {
      display: none;
    }
  }

  .img_one {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_two {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 48%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_three {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 30%;
      height: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }

  .video {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    video {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .byq_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items: center;

    .byq_bottom_right {
      display: flex;
      align-items: center;

      .byq_bottom_right_item {
        display: flex;
        align-items: center;
        font-size: 26px;
        font-weight: 400;
        color: #333333;
        margin-right: 35px;

        .byq_bottom_right_item_img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    margin-bottom: 15px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 26px;
      }

      img {
        width: 32px;
        height: 16px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: -8px;
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          color: #333;
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            // width: 90px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.list {
  width: 1200px;
  margin: auto;

  .li {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
      object-fit: contain;
      cursor: pointer;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        color: #333;
        font-size: 26px;
        cursor: pointer;
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;
        white-space: nowrap;

        img {
          width: 31px;
          height: 31px;
        }

        div {
          display: inline-block;
          /* width: 90px; */
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;

      .p1 {
        //width: 120px;
        font-size: 32px;
        color: #e00000;
        text-align: center;
      }

      .p2 {
        //width: 120px;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }

  .lify {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
      object-fit: contain;
      cursor: pointer;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        color: #333;
        font-size: 26px;
        cursor: pointer;
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;
        white-space: nowrap;

        img {
          width: 31px;
          height: 31px;
        }

        div {
          display: inline-block;
          /* width: 90px; */
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;

      .p1 {
        //width: 120px;
        font-size: 32px;
        color: #e00000;
        text-align: center;
      }

      .p2 {
        //width: 120px;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }

  .lifw {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
      border-radius: 10px;
    }

    .fwxm {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        font-size: 24px;
        cursor: pointer;
        font-weight: 600;
        color: #64b6a8;
      }

      .t_2 {
        font-size: 16px;
        color: #666666;
        margin-top: 12px;
      }
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        font-size: 24px;
        cursor: pointer;
        font-weight: 600;
      }

      .t_2 {
        font-size: 16px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 16px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 16px;
        color: #666666;
        bottom: 0;
        left: 0;
        white-space: nowrap;

        img {
          vertical-align: top;
          width: 31px;
          height: 31px;
          border-radius: 31px;
        }

        div {
          display: inline-block;
          //width: 90px;
          padding: 0px 5px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;

      .p1 {
        //width: 120px;
        //font-size: 32px;
        font-size: 30px;
        color: #e00000;
        text-align: center;
      }

      .p2 {
        //width: 120px;
        //font-size: 18px;
        font-size: 16px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

/deep/.el-rate__icon {
  font-size: 30px;
}

.vip-level {
  width: 80px;

  text-align: center;
  padding: 4px 0;

  border: 1px solid #bd90d9;
  border-radius: 4px 4px 4px 4px;
  font-size: 15px;
  background: #f6f0ff;
  font-weight: 500;
  color: #bd90d9;
}
</style>
